<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>3D Pie Charts</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="chartA" width="400" height="400"></canvas>
    <canvas id="chartB" width="400" height="400"></canvas>
    <canvas id="chartC" width="400" height="400"></canvas>
    <script>
        // 数据
        const dataA = [60, 13, 10, 17];
        const dataB = [49, 24, 16, 11];
        const dataC = [55, 23, 14, 8];
        const labels = ['系列A', '系列B', '系列C', '系列D'];

        // 颜色
        const colors = ['#ff9999','#66b3ff','#99ff99','#ffcc99'];

        // 创建饼图的函数
        function createPieChart(ctx, data, title) {
            return new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: colors,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: title
                        }
                    },
                    // 立体效果插件
                    plugins: {
                        beforeDraw: function(chart) {
                            const ctx = chart.ctx;
                            const chartArea = chart.chartArea;
                            const top = chartArea.top;
                            const left = chartArea.left;
                            const width = chartArea.right - left;
                            const height = chartArea.bottom - top;
                            ctx.save();
                            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
                            ctx.translate(left, top + height / 2);
                            ctx.scale(1, 0.6);
                            ctx.beginPath();
                            ctx.arc(width / 2, height / 2, height / 2, 0, 2 * Math.PI);
                            ctx.fill();
                            ctx.restore();
                        }
                    }
                }
            });
        }

        // 创建三个饼图
        const ctxA = document.getElementById('chartA').getContext('2d');
        const ctxB = document.getElementById('chartB').getContext('2d');
        const ctxC = document.getElementById('chartC').getContext('2d');

        createPieChart(ctxA, dataA, '店铺A');
        createPieChart(ctxB, dataB, '店铺B');
        createPieChart(ctxC, dataC, '店铺C');
    </script>
</body>
</html>
